<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue'

  import checkboxCheck from '@/assets/checkbox-check.png'
  import checkboxUnCheck from '@/assets/checkbox-uncheck.png'
  import radioCheck from '@/assets/radio-check.png'
  import radioUnCheck from '@/assets/radio-uncheck.png'
  import type { ICmsPickerOption, ICmsQuestion } from '@/plugin/cmsAnalysis'
  import { CmsQuestionTypeEnum } from '@/plugin/cmsAnalysis'
  import { getUserId } from '@/utils/storage'
  import { delHtmlTag } from '@/utils/util'
  import { openDocument } from '@/utils/util'
  import { PAGE_TITLE } from '@/enum/pageEnum'

  import Layout from './components/Layout.vue'
  const props = defineProps<{ publishId: string; recordID: string }>()
  import { useCmsPreview } from '@/plugin/cmsAnalysis'
  const initFlag = ref(false)
  const { paper, preparePaper, analysisPaperTemplate, analysisAnswer } = useCmsPreview()

  const param_publishID = props.publishId // props.publishId // '995F146029FE4EC2840B2E59620FADE9'
  const param_recordID = props.recordID // props.recordID // 'df0f0c84faeb48c79dbcf36ea64a2a7e'

  onMounted(async () => {
    preparePaper({ publishId: param_publishID, recordId: param_recordID, userId: getUserId() })
    await analysisPaperTemplate()
    await analysisAnswer()
    // console.log('可以渲染paper了: ', paper.value)
    for (let i = 0; i < paper.value.questions.length; i++) {
      const question = paper.value.questions[i]
      if (question.questionType !== CmsQuestionTypeEnum.CHECKBOX) continue
      question.options.forEach((option) => {
        const checkbox: any = []
        question.answer.checkbox.forEach((item: any) => {
          if (typeof item === 'object') {
            item?.forEach((optionId: any) => {
              checkbox.push(optionId)
            })
          } else {
            checkbox.push(item)
          }
        })
        question.answer.checkbox = checkbox
      })
    }
    initFlag.value = true
  })
  /** picker选中项-回显文本 */
  const getPickerText = computed(() => {
    return (question: ICmsQuestion) => {
      const options = (question.options[0]?.optionText ?? []) as ICmsPickerOption[]
      return options.find((item) => item.value === question.answer.picker)?.label
    }
  })
  const previewFile = (question: any) => {
    openDocument(question.answer.file[0])
  }
  const getFileType = (file: any) => {
    if (file === '') return false
    const type = file.substring(file.lastIndexOf('.') + 1)
    return ['bmp', 'jpg', 'jpeg', 'png', 'webp', 'apng', 'gif'].includes(type)
  }
  const getFileName = (filePath: string) => {
    return filePath.substring(filePath.lastIndexOf('/') + 1)
  }
</script>

<template>
  <Layout :title="PAGE_TITLE" :isScroll="true">
    <template #content>
      <view class="paper-questions" v-if="initFlag">
        <view class="paper-question" v-for="(question, questionI) in paper.questions" :key="`paper-question${questionI}`">
          <view v-if="question.isAnswer">
            <view class="paper-question-title">
              <text class="paper-question-required" v-if="question.required">*</text>
              <text class="paper-question-title-checkbox" v-if="question.questionType === CmsQuestionTypeEnum.CHECKBOX">多选</text>
              <text>{{ delHtmlTag(question.questionName) }}</text>
            </view>
            <view class="paper-question-content">
              <!-- 填空 -->
              <textarea class="input" disabled type="text" v-if="question.questionType === CmsQuestionTypeEnum.INPUT" v-model="question.answer.input"></textarea>
              <!-- 单选 -->
              <view class="radio" v-else-if="question.questionType === CmsQuestionTypeEnum.RADIO">
                <view class="radio-item" v-for="(option, optionI) in question.options" :key="`radio-item${optionI}`">
                  <image class="icon" :src="question.answer.radio === option.optionId ? radioCheck : radioUnCheck" />
                  <text class="text">{{ option.optionText }}</text>
                </view>
              </view>
              <!-- 多选 -->
              <view class="checkbox" v-else-if="question.questionType === CmsQuestionTypeEnum.CHECKBOX">
                <view class="checkbox-item" v-for="(option, optionI) in question.options" :key="`checkbox-item${optionI}`">
                  <image class="icon" :src="question.answer.checkbox?.includes(option.optionId) ? checkboxCheck : checkboxUnCheck" />
                  <text class="text">{{ option.optionText }}</text>
                </view>
              </view>
              <!-- 列表选择 -->
              <view class="picker" v-else-if="question.questionType === CmsQuestionTypeEnum.PICKER">
                <view class="FormSelect-select">
                  <text class="name">{{ getPickerText(question) }}</text>
                </view>
              </view>
              <!-- 图片上传 -->
              <view class="file" v-else-if="question.questionType === CmsQuestionTypeEnum.FILE">
                <view v-if="getFileType(question.answer.file[0])">
                  <image :src="question.answer.file[0]" mode="widthFix" />
                </view>
                <view v-else-if="question.answer.file[0]" @click="previewFile(question)">{{ getFileName(question.answer.file[0]) }}</view>
              </view>
            </view>
            <view class="division-line-dotted" />
          </view>
        </view>
      </view>
    </template>
  </Layout>
</template>

<style lang="less">
  .division-line-dotted {
    margin: 38rpx 0 40rpx;
    border-top: 2rpx dotted #e0e1e6;
  }

  .paper-questions {
    font-size: 32rpx;
    color: #1d2129;

    .paper-question {
      margin: 8rpx 0;

      .paper-question-title {
        margin-bottom: 24rpx;

        .paper-question-required {
          margin-right: 8rpx;
          color: #ff5d5d;
        }

        .paper-question-title-checkbox {
          width: 80rpx;
          height: 36rpx;
          padding: 0 16rpx;
          margin-right: 8rpx;
          font-size: 24rpx;
          color: #00474f;
          background: #87e8de;
          border-radius: 4rpx;
        }
      }

      .paper-question-content {
        .input {
          width: 100%;
          height: 128rpx;
          padding: 10rpx 24rpx 0;
          background: #f7f8fa;
          border-radius: 4px;

          &:focus {
            background: #fff;
            border: 2rpx solid #13c2c2;
            border-radius: 4px;
            outline: none;
          }
        }

        .radio {
          .radio-item {
            display: flex;
            align-items: center;
            min-height: 88rpx;

            &:not(:nth-last-of-type(1)) {
              border-bottom: 1px solid #f7f8fa;
            }

            .icon {
              flex-shrink: 0;
              width: 40rpx;
              height: 40rpx;
            }

            .text {
              padding: 48rpx 0;
              margin-left: 12rpx;
            }
          }
        }

        .checkbox {
          .checkbox-item {
            display: flex;
            align-items: center;
            min-height: 88rpx;

            &:not(:nth-last-of-type(1)) {
              border-bottom: 1px solid #f7f8fa;
            }

            .icon {
              flex-shrink: 0;
              width: 40rpx;
              height: 40rpx;
            }

            .text {
              padding: 48rpx 0;
              margin-left: 12rpx;
            }
          }
        }

        .picker {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 88rpx;
          padding: 0 24rpx;
          color: #86909c;
          background: #f7f8fa;
          border-radius: 4px;

          > picker {
            width: 100%;
          }

          .icon {
            width: 32rpx;
          }
        }

        .file {
          word-break: break-word;
        }
      }
    }
  }
</style>
